<%-- 
    Document   : loginpage
    Created on : 26-nov-2012, 18:55:25
    Author     : kjeld
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link href="style/general.css" type="text/css" rel="Stylesheet">
                <link rel="stylesheet" href="style/digitalclassroom.css" />
                <link rel="stylesheet" href="style/slideshow.css" />
                <!-- include jQuery Library From Google Code -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

                <!-- include jQuery UI  From Google Code-->
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

                <script src="js/jquery.rs.slideshow.js"></script>

                <script src="js/dynamic-controls-bootstrap.js"></script>
                <script type="text/javascript">
                    google.load("jquery", "1.3.1");
                    google.setOnLoadCallback(function()
                    {
                        // Just for demonstration purposes, change the contents/active state using jQuery
                        $("#blackboardmenu ul li a").click(function(e) {
                            e.preventDefault();
		
                            $("#blackboardmenu ul li a").each(function() {
                                $(this).removeClass("active");	
                            });
		
                            $(this).addClass("active");
		
                            $("h3").html($(this).attr("title"));
		
                            var iFrame = document.getElementById('blackboardFrame');
                            if($(this).attr("title") == "PDF"){
                                //iFrame.src = "http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Workbook.pdf&embedded=true";
                                iFrame.src = "http://docs.google.com/gview?url=${path}${pdfFile.name}&embedded=true";
                            }
                            else if($(this).attr("title") == "Slides"){
                                //iFrame.src = "http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Three2Learn.ppt&embedded=true";
                                iFrame.src = "http://docs.google.com/gview?url=${path}${pptFile.name}&embedded=true";
                            }
                            else {
                                iFrame.src = "";
                            }
                        });
                    });
                </script>

                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#menu a").hover(function() {
                            $(this).stop().animate({ backgroundColor: "#4e88b2"}, 800);
                        },function() {
                            $(this).stop().animate({ backgroundColor: "#504e4e" }, 800);
                        });
				
                    }); 
                </script>

                <jsp:useBean id="inhoud" scope="application" class="models.Bean" />   
                <jsp:setProperty name="inhoud" property="language" value="<%= models.Bean.getLanguage()%>" />

                <title>
                    Three 2 Learn
                </title>

                <!-- The main style sheet -->
                <link rel="stylesheet" href="style/login.css" type="text/css" media="screen" />

                <!-- START Fx.Slide -->
                <!-- The CSS -->
                <link rel="stylesheet" href="style/fx.slide.css" type="text/css" media="screen" />
                <!-- Mootools - the core -->
                <script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
                <!--Toggle effect (show/hide login form) -->
                <script type="text/javascript" src="js/mootools-1.2-more.js"></script>
                <script type="text/javascript" src="js/fx.slide.js"></script>
                <!-- END Fx.Slide -->

                </head>

                <body>
                    <!-- Login -->
                    <div id="login">
                        <div class="loginContent">
                            <form action="login" method="post">
                                <label for="log"><b>
                                        <jsp:setProperty name="inhoud" property="key" value="Username" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        : </b></label>
                                <input class="field" type="text" name="userName" id="userName" value="" size="23" />
                                <label for="pwd"><b>
                                        <jsp:setProperty name="inhoud" property="key" value="Password" />
                                        <jsp:getProperty name="inhoud" property="key" />
                                        :</b></label>
                                <input class="field" type="password" name="passWord" id="passWord" size="23" />
                                <input type="submit" name="submit" value="" class="button_login" />
                                <input type="hidden" name="redirect_to" value=""/>
                            </form>
                            <div class="left">
                                <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
                            <div class="right">
                                <jsp:setProperty name="inhoud" property="key" value="NotAMember" />
                                <jsp:getProperty name="inhoud" property="key" />
                                <a href="student/register">
                                    <jsp:setProperty name="inhoud" property="key" value="Register" />
                                    <jsp:getProperty name="inhoud" property="key" />
                                </a> | <a href="#">
                                    <jsp:setProperty name="inhoud" property="key" value="ForgotPassword" />
                                    <jsp:getProperty name="inhoud" property="key" />
                                </a></div>
                        </div>
                        <div class="loginClose"><a href="#" id="closeLogin">
                                <jsp:setProperty name="inhoud" property="key" value="ClosePanel" />
                                <jsp:getProperty name="inhoud" property="key" />
                            </a></div>
                    </div> <!-- /login -->

                    <div id="container">

                        <div id="wrapper">
                            <div id="header">
                                <div id="topmenu">
                                    <ul class="login">
                                        <li><img src="style/logo32L.png"/></li>
                                        <li><a href="/language?lang=nl" title="Nederlands"><img src="images/flags/nl.png"></a></li>
                                        <li><a href="/language?lang=en" title="English"><img src="images/flags/uk.png"></a></li>
                                        <c:choose>
                                            <c:when test="${loggedin eq 'true'}">
                                                <li><a href="/logout" id="toggleLogout" >
                                                        <jsp:setProperty name="inhoud" property="key" value="LogOut" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>
                                                <li><a href="/${omgeving}" >
                                                        <jsp:setProperty name="inhoud" property="key" value="BackTo" />
                                                        <jsp:getProperty name="inhoud" property="key" /> ${omgeving}
                                                        <jsp:setProperty name="inhoud" property="key" value="TheEnvironment" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>
                                                </c:when>
                                                <c:otherwise>
                                                <li><a href="#" id="toggleLogin" >
                                                        <jsp:setProperty name="inhoud" property="key" value="Login" />
                                                        <jsp:getProperty name="inhoud" property="key" />
                                                    </a></li>
                                                </c:otherwise>
                                            </c:choose>                        
                                    </ul>
                                </div>
                                <div class="middle">
                                    <div id="menu">
                                        <ul>
                                            <li><a href="/index">
                                                    <jsp:setProperty name="inhoud" property="key" value="Homepage" />
                                                    <jsp:getProperty name="inhoud" property="key" />
                                                </a></li>
                                            <li><a href="/courses">
                                                    <jsp:setProperty name="inhoud" property="key" value="Courses" />
                                                    <jsp:getProperty name="inhoud" property="key" />
                                                </a></li>

                                            <li><a href="three2Learn.jsp">Three2Learn</a></li>
                                            <li><a href="information.jsp">

                                                    <jsp:setProperty name="inhoud" property="key" value="Information" />

                                                    <jsp:getProperty name="inhoud" property="key" />
                                                </a></li>
                                            <li><a href="faq.jsp">

                                                    <jsp:setProperty name="inhoud" property="key" value="FAQ" />
                                                    <jsp:getProperty name="inhoud" property="key" />
                                                </a></li>

                                            <li><a href="contact.jsp" class="lastItem">Contact</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div id="context">
                                <div id="left" style="width: 1066px; float: left;">
                                    <div id="blackboard">
                                        <!--<iframe id="blackboardframe" src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Workbook.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>-->
                                        <div id="blackboardmenu" style="width: 350px;">
                                            <ul>
                                                <li><a href="#" title="Slides" class="active"><jsp:setProperty name="inhoud" property="key" value="Slides" />
                                                        <jsp:getProperty name="inhoud" property="key" /></a></li>
                                                <li><a href="#" title="PDF">PDF</a></li>
                                                <li><a href="#" title="Blackboard">Blackboard</a></li>
                                            </ul>
                                        </div>
                                        <div id="main" style="width: 350px; height: 404px;">
                                            <h3>
                                                <jsp:setProperty name="inhoud" property="key" value="Slides" />
                                                <jsp:getProperty name="inhoud" property="key" />
                                            </h3>
                                            <p><iframe id="blackboardFrame" style="padding-right: 0px;width: 325px; height: 370px; margin-right: 0px; margin-left: 0px;"src="http://docs.google.com/gview?url=http://three2learn.kjeldgroot.nl/media/Three2Learn.ppt&embedded=true" style="width:325px; height:100%;" frameborder="0"></iframe></p>

                                        </div>
                                    </div>
                                    <div id="livestream" style="width: 420px; height: 404px; margin-top: 76px; margin-right: 0px;padding-right: 5px;">
                                        <iframe width="425px" height="400px" src="http://www.youtube.com/embed/ohJCdihPWqc" frameborder="0"></iframe>
                                    </div>
                                    <div id="c4u-chat-widget-container" style="width: 198px; float: left; padding-top: 76px;">
                                        <link rel="stylesheet" href="http://www.chatbot4u.com/js/chatWidget/css/main.css" tyle="text/css">
                                            <iframe src="http://www.chatbot4u.com/en/externals/widget?chatbot=three2learn&w=200&h=400" width="198" height="400" frameborder="0" scrolling="no"/>
                                            <div id="c4u-chat-widget-footer"><a class='link' href='http://www.chatbot4u.com' id='c4u-link'>Chatbot</a>
                                            </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </body>

                </html>
